<template>
  <div class="home" style="margin: 10px">
    <!--  功能区域  -->
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add">新增</el-button>
    </div>

    <!--  搜索区域  -->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 40%" clearable></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
    </div>

    <!--  表格区域  -->
    <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
        :row-class-name="tableRowClassName"
    >
      <!--   定义表头部分   -->
      <el-table-column prop="id" label="id" sortable/>
      <el-table-column prop="title" label="标题"/>
      <el-table-column prop="author" label="作者"/>
      <el-table-column prop="time" label="时间"/>


      <!--   定义操作部分   -->
      <el-table-column fixed="right" label="操作" width="200">
        <template #default = "scope">
          <el-button  type="primary" @click="details(scope.row)">详情</el-button>
          <el-button  type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm confirm-button-text="确认" @confirm ="handleDelete(scope.row.id)" title="确定要删除吗？">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>


    <!--  分页显示部分  -->
    <div style="margin: 10px 0">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-sizes="[5,10,20]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper"
                     :total="total"/>


      <!--   新增按钮的弹窗   -->
      <el-dialog v-model="dialogVisible" icon="Edit" title="编辑" width="50%">
        <el-form :model="form" label-width="120px">
          <el-form-item label="标题">
            <el-input v-model="form.title" style="width: 50%"></el-input>
          </el-form-item>

          <div  ref="editor" id="div1"></div>

        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="save">确定</el-button>
          </span>
        </template>
      </el-dialog>
      <el-dialog title="详情" v-model="vis" width="50%">
        <el-card v-html="detail.context" style="min-height: 100px"></el-card>
      </el-dialog>
    </div>
  </div>
</template>


<script>
import request from "@/utils/request";
import E from 'wangeditor'


let editor;
export default {
  name: 'News',
  components: {
  },
  data() {
    return {
      form: {},
      search: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      // 列表中的数据
      tableData: [],
      vis: false,
      detail:{},
    }
  },
  created() {
    this.load()
  },
  methods: {
    //详情
    details(row){
      this.vis = true //开启弹窗
      this.detail = row //给属性赋值
    },


    //上传文件
    filesUploadSuccess(res){
      console.log(res)
      this.form.cover = res.data
    },


    //编辑
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true

      //编辑的时候创建一个富文本,此处要做判断
      this.$nextTick(()=>{
        if (editor==null){
          editor = new E('#div1')
          editor.create()

          //配置server接口地址
          editor.config.uploadImgServer = "http://localhost:8081/files/editor/upload"
          //配置文件名
          editor.config.uploadFileName = "file"
          editor.txt.html(row.context);
        }else {
          editor.destroy()
          editor = new E('#div1')
          editor.create()

          //配置server接口地址
          editor.config.uploadImgServer = "http://localhost:8081/files/editor/upload"
          //配置文件名
          editor.config.uploadFileName = "file"
          editor.txt.html(row.context);
        }
      })
    },


    //保存
    save() {
      this.form.context = editor.txt.html() //获取编辑器里面的值，然后赋值给实体
      let userStr = sessionStorage.getItem("user") || "{}"
      let user = JSON.parse(userStr)

      if (this.form.id){ //更新
        request.put("/news",this.form).then(res =>{
          if (res.code === '0'){
            //更新成功时弹窗给出成功信息
            this.$message({
              type: "success",
              message: "更新成功"
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load() // 刷新表格的数据
          this.dialogVisible = false //关闭弹窗
        })
      } else{ // 新增
        this.form.author = user.username
        request.post("/news",this.form).then(res => {
          if (res.code === '0'){
            //新增成功时弹窗给出成功信息
            this.$message({
              type: "success",
              message: "新增成功"
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load() // 刷新表格的数据
          this.dialogVisible = false //关闭弹窗
        })
      }
    },


    //删除
    handleDelete(id){
      console.log(id)
      request.delete("/news/" + id).then(res => {
        if (res.code === '0'){
          //更新成功时弹窗给出成功信息
          this.$message({
            type: "success",
            message: "删除成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load() // 刷新表格的数据
      })
    },


    // 改变每页个数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },


    // 改变当前页数
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.load()
    },


    //新增
    add() {
      // 打开弹窗添加图书
      this.dialogVisible = true
      // 每次打开弹窗输入后要清空否则影响下次使用
      this.form = {}

      this.$nextTick(()=>{
        if (editor==null){
          editor = new E('#div1')

          //配置server接口地址
          editor.config.uploadImgServer = "http://localhost:8081/files/editor/upload"
          //配置文件名
          editor.config.uploadFileName = "file"

          editor.create()
        }
        editor.txt.html("")
      })
    },


    // 刷新数据
    load(){
      request.get("/news",{
        params:{
          currentPage:this.currentPage,
          pageSize:this.pageSize,
          search:this.search
        }
      }).then(res=>{
        console.log(res)
        // 后台返回的数据赋值给表格
        this.tableData = res.data.records
        // 后台返回的数据总条数
        this.total = res.data.total
      })
    }

  }

}
</script>


